<template>
  <div class="mainRight">
    <el-form
      ref="ruleForm"
      class="ruleForm"
      :model="ruleForm"
      label-width="80px"
      inline
    >
      <el-form-item label="年份:">
        <el-select v-model="ruleForm.year" placeholder="请选择">
          <el-option
            v-for="item in yearList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="月份:">
        <el-select v-model="ruleForm.month" clearable placeholder="请选择">
          <el-option
            v-for="item in monthList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="组织:">
        <el-select v-model="value" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="tableListOperator">
      <div class="leftBtns">
        <el-button type="primary" icon="el-icon-download" size="small"
          >导出</el-button
        >
        <el-button plain icon="el-icon-user" size="small"
					@click="approval">积分审批</el-button>
      </div>
      <div class="rightBtns">
        <el-button plain size="small">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small"
          >查询</el-button
        >
      </div>
    </div>
    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column label="排名" type="index" width="50" align="center">
      </el-table-column>
      <el-table-column prop="zz" label="组织名称" align="center">
      </el-table-column>
      <el-table-column prop="jf" label="积分" align="center">
        <template slot-scope="{ row }">
          <div >
            19.0 (系统积分: <span style="color: red">19.0</span> 申报积分:<span
              style="color: red"
              >0.0</span
            >)
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <div
            
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-button type="text">积分申报</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text">积分明细</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="ruleForm.total>0"
      :total="ruleForm.total"
      :page.sync="ruleForm.pageNum"
      :limit.sync="ruleForm.pageSize"
      @pagination="()=>{}"
    />
		<el-dialog title="积分审批" :visible.sync="showdialog" width="1200px">
			<el-form
				:model="dialogForm"
				label-width="80px"
				label-position="right"
			>
				<el-row :gutter="30">
					<el-col :span="8">
						<el-form-item label="申报时间">
							<el-date-picker
								v-model="dialogForm.date"
								type="daterange"
								range-separator="~"
								start-placeholder="开始时间"
								end-placeholder="结束结束时间"
								style="width: 100%"
							>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="积分分类">
							<el-select
								v-model="dialogForm.type"
								placeholder="请选择"
								style="width: 100%"
							>
								<el-option
									label="支部积分"
									value="1"
								></el-option>
								<el-option
									label="系统积分"
									value="2"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="年份">
							<el-select
								v-model="dialogForm.year"
								placeholder="请选择"
								style="width: 100%"
							>
								<el-option label="2024" value="1"></el-option>
								<el-option label="2023" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<el-col :span="8">
						<el-form-item label="申报对象">
							<el-input
								v-model="dialogForm.obj"
								placeholder="请输入申报对象"
							/> </el-form-item
					></el-col>
				</el-row>
			</el-form>

			<div class="tableListOperator">
				<div class="leftBtns"></div>
				<div class="rightBtns">
					<el-button size="small" plain>重置</el-button>
					<el-button type="primary" size="small" icon="el-icon-search"
						>查询</el-button
					>
				</div>
			</div>
			<div class="tableListOperator">
				<div class="leftBtns">
					<el-button size="small" plain icon="el-icon-circle-close"
						>批量驳回</el-button
					>
				</div>
				<div class="rightBtns"></div>
			</div>
			<el-table
				:data="dialoglist"
				style="width: 100%"
				v-loading="dialogloading"
			>
				<el-table-column prop="name" label="申报时间" align="center" />
				<el-table-column prop="name" label="申报对象" align="center" />
				<el-table-column prop="name" label="所属组织" align="center" />
				<el-table-column prop="name" label="积分分类" align="center" />
				<el-table-column prop="name" label="积分内容" align="center" />
				<el-table-column prop="name" label="申报周期" align="center" />
				<el-table-column prop="name" label="分制" align="center" />
				<el-table-column prop="name" label="积分上限" align="center" />
				<el-table-column prop="name" label="当前分数" align="center" />
				<el-table-column prop="name" label="申报分数" align="center" />
				<el-table-column prop="name" label="核定分数" align="center" />
				<el-table-column label="操作" align="center">
					<template slot-scope="{ row }"> </template>
				</el-table-column>
			</el-table>
		</el-dialog>
  </div>
</template>

<script>
import { getConfigList } from "@/api/setting";
import {
  addScore,
  editScore,
  getScoreList,
  scoretypelist,
  addscoretype,
  editscoretype,
  deletescoretype,
} from "@/api/party";
export default {
  data() {
    return {
      title: "积分分类新增",
      loading: true,
      ruleTitle: "",
      dialogVisible: false,
      ruleDialogVisible: false,
      list: [],
      ruleForm: {
        typeId: "",
        pageNum: 1,
        pageSize: 10,
        total: 10,
        year:2024,
        month:null
      },
      rules: {
        name: [{ required: true, message: "请输入积分分类", trigger: "blur" }],

        title: [{ required: true, message: "请输入内容", trigger: "blur" }],
        cycle: [{ required: true, message: "请选择周期", trigger: "change" }],
        highscore: [
          { required: true, message: "请输入最高分", trigger: "blur" },
        ],
        basisscore: [
          { required: true, message: "请输入基本分", trigger: "blur" },
        ],
        bouns: [
          { required: true, message: "请选择积分类型", trigger: "change" },
        ],
      },
      form: {
        id: "",
        name: "",
        typeid: "",
        title: "",
        bouns: "",
        basisscore: "",
        highscore: "",
        cycle: "",
        status: 1,
        scoretype: 1,
        scoredayup: "",
      },
      pointsForm: {
        id: null,
        name: "",
        pid: "",
      },
      typeList: [], //类别
      // 待删除字段

      value: "",
      radio: "",
      options: [],
      yearList: [
        {
          label: "2024",
          value: 2024,
        },
        {
          label: "2023",
          value: 2023,
        },
        {
          label: "2022",
          value: 2022,
        },
        {
          label: "2021",
          value: 2021,
        },
        {
          label: "2020",
          value: 2020,
        },
      ],
      monthList: [
        {
          label: "全部",
          value: null,
        },
        {
          label: "1月",
          value: 1,
        },
        {
          label: "2月",
          value: 2,
        },
        {
          label: "3月",
          value: 3,
        },
        {
          label: "4月",
          value: 4,
        },
        {
          label: "5月",
          value: 5,
        },
        {
          label: "6月",
          value: 6,
        },
        {
          label: "7月",
          value: 7,
        },
        {
          label: "8月",
          value: 8,
        },
        {
          label: "9月",
          value: 9,
        },
        {
          label: "10月",
          value: 10,
        },
        {
          label: "11月",
          value: 11,
        },
        {
          label: "12月",
          value: 12,
        },
      ],
			showdialog: false,
			dialogForm: {},
			dialoglist: [],
			dialogloading: false,
    };
  },
  methods: {
    cancelForm() {
      this.form.id = null;
      this.ruleDialogVisible = false;

      this.form.typeid = "";
      this.form.bouns = "";
      this.form.basisscore = "";
      this.form.highscore = "";
      this.form.cycle = "";
      this.form.status = "";
      this.form.scoretype = "";
      this.form.scoredayup = "";
      this.form.name = "";
      this.form.title = "";
    },
    cancelPoints() {
      this.dialogVisible = false;
      this.pointsForm.id = "";
      this.pointsForm.name = "";
    },
    ruleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let api = this.form.id ? editScore(this.form) : addScore(this.form);
          api.then((res) => {
            this.loading = true;
            this.$modal.msgSuccess(res.msg);
            this.ruleDialogVisible = false;
            this.form.id = "";
            this.getList();
          });
        } else {
          return false;
        }
      });
    },
    handleItem(type, item) {
      if (type == 1) {
        if (item.childlist) {
          this.title = "积分分类修改";
          this.pointsForm.id = item.id;
          this.pointsForm.name = item.name;
          this.dialogVisible = true;
        } else {
          this.ruleTitle = "积分内容修改";
          this.form.id = item.id;
          this.form.typeid = item.typeid;
          this.form.bouns = item.bouns;
          this.form.basisscore = item.basisscore;
          this.form.highscore = item.highscore;
          this.form.cycle = item.cycle;
          this.form.status = item.status;
          this.form.scoretype = item.scoretype;
          this.form.scoredayup = item.scoredayup;
          this.form.name = item.typename;
          this.form.title = item.title;
          this.ruleDialogVisible = true;
        }
      } else if (type == 2) {
        this.$confirm(`确定删除 ${item.name} 吗？`, "删除积分类型", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deletescoretype({ id: item.id }).then((res) => {
              this.loading = true;
              this.$modal.msgSuccess(res.msg);

              this.getList();
            });
          })
          .catch(() => {});
      } else {
        this.ruleTitle = "积分内容新增";
        this.form.typeid = item.id;
        this.form.name = item.name;
        this.ruleDialogVisible = true;
      }
    },
    handleChange() {},
    // 积分分类添加
    pointsSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let api = this.pointsForm.id
            ? editscoretype(this.pointsForm)
            : addscoretype(this.pointsForm);
          api.then((res) => {
            this.loading = true;
            this.pointsForm.name = "";
            this.pointsForm.id = "";
            this.$modal.msgSuccess(res.msg);
            this.dialogVisible = false;

            this.getList();
          });
        } else {
          return false;
        }
      });
    },
    //切换分页
    handleCurrentChange(val) {
      this.loading = true;
      this.ruleForm.pageNum = val;
    },
    //切换总条数
    handleSizeChange(val) {
      this.loading = true;
      this.ruleForm.pageSize = val;
    },
    getList() {
      getScoreList().then((res) => {
        this.loading = false;
        this.list = res.data;
      });
    },
    getConfigList() {
      getConfigList({ configflag: "gongzuojifenleibie" }).then((res) => {
        this.typeList = res.data;
        if (res.data.length) {
          this.ruleForm.typeId = res.data[0].id;
          this.pointsForm.pid = res.data[0].id;
        }
      });
    },
		approval() {
			this.showdialog = true
		},
  },
  created() {
    this.getList();
    this.getConfigList();
  },
};
</script>

<style lang="scss" scoped>
.color-gray {
  color: #a0a2ad;
}
.ruleForm {
  margin-bottom: 14px;
  ::v-deep .el-form-item {
    width: 32.5%;
    // margin-right: 0;
    margin-bottom: 10px;
  }
  ::v-deep .el-form-item__content {
    width: calc(100% - 80px);
    .el-select {
      width: 100%;
    }
  }
}
</style>
